<script setup lang="ts">
import { ref } from 'vue'
import HmList from './components/HmList.vue'

const list = ref<
  {
    id: number
    name: string
    price: number
    num: number
  }[]
>([
  {
    id: 1,
    name: '西瓜',
    price: 4,
    num: 1
  },
  {
    id: 2,
    name: '苹果',
    price: 6,
    num: 1
  },
  {
    id: 3,
    name: '雪梨',
    price: 5,
    num: 1
  }
])

const setNum = (id: number, step: number): void => {
  console.log('setNum')
  const findItem = list.value.find(item => item.id === id)
  if (findItem) {
    findItem.num = findItem.num + step
  }
}
</script>

<template>
  <div class="app-page">
    <h2>购物车案例</h2>
    <HmList :list="list" @setNum="setNum"></HmList>
  </div>
</template>

<style scoped></style>
